<template>
  <KView class="goods-evaluat">
    <page-header title="商品评价" @back-click="toBack">
      <KView v-if="goodsEval!==null" class="goods-evaluat-submit" @click="toSubmit">提交</KView>
    </page-header>
    <KView class="goods-evaluat-line"></KView>

    <KView class="goods-evaluat-content" v-if="goodsEval!==null">
      <KView class="goods-evaluat-info">
        <KView class="goods-evaluat-pic">
          <sys-image :src="goodsEval.pic" mode="auto" :radius="8"></sys-image>
        </KView>
        <KView class="goods-evaluat-data">
          <KView class="goods-evaluat-name ellipsis">{{goodsEval.name}}</KView>
        </KView>
      </KView>
      <KView class="goods-evaluat-score goods-evaluat-statscore clearfix">
        <KView class="goods-evaluat-score-label">总体评价</KView>
        <KView class="goods-evaluat-score-star">
          <sys-star-input v-model="goodsEval.score" :size="44"></sys-star-input>
        </KView>
        <KView class="goods-evaluat-score-text">{{scoreTextData[goodsEval.score]}}{{scoreList}}</KView>
      </KView>
      <KView class="goods-evaluat-line"></KView>

      <KView class="goods-evaluat-remark">
        <KView class="goods-evaluat-remark-input">
          <sys-textarea v-model="goodsEval.remark" placeholder="宝贝满足你的期待吗？说说它的优点和美中不足的地方吧"></sys-textarea>
        </KView>
        <KView class="goods-evaluat-remark-pic">
          <imgs-upload ref="imgsUpload" v-model="goodsEval.evaluatPicList" prefix-name="evaluat" :limit="3"></imgs-upload>
        </KView>
      </KView>
      <KView class="goods-evaluat-content-line"></KView>

      <KView class="goods-evaluat-content-star">
        <KView class="goods-evaluat-content-star-title">商品评价</KView>
        <KView class="goods-evaluat-score clearfix">
          <KView class="goods-evaluat-score-label">包装评价</KView>
          <KView class="goods-evaluat-score-star">
            <sys-star-input v-model="goodsEval.packScore" :size="44"></sys-star-input>
          </KView>
          <KView class="goods-evaluat-score-text">{{scoreTextData[goodsEval.packScore]}}</KView>
        </KView>
        <KView class="goods-evaluat-score clearfix">
          <KView class="goods-evaluat-score-label">味道评价</KView>
          <KView class="goods-evaluat-score-star">
            <sys-star-input v-model="goodsEval.tasteScore" :size="44"></sys-star-input>
          </KView>
          <KView class="goods-evaluat-score-text">{{scoreTextData[goodsEval.tasteScore]}}</KView>
        </KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import PageHeader from 'common/pageHeader';
  import SysImage from 'common/sysImage';
  import SysTextarea from 'common/sysTextarea';
  import ImgsUpload from 'common/imgsUpload';
  import SysStarInput from 'common/sysStarInput';

  import GoodsEvaluat from 'models/goodsOrder/goodsEvaluat';
  import GoodsOrderApi from 'services/goodsOrderApi';

  export default {
    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        goodsEval: null,
        scoreTextData: GoodsEvaluat.scoreTextData
      };
    },

    created() {
      if (this.isMiniprogram) {
        let pages = getCurrentPages();
        let preWin = pages[pages.length - 2].window;
        let goodsData = preWin.evaluatGoodsData;
        this.goodsEval = new GoodsEvaluat(goodsData);
      }
    },

    methods: {
      toSubmit() {
        if(this.$refs['imgsUpload'].checkLoading()){
          this.$api.showToast({
            title: '图片正在上传',
            icon: 'none'
          });
          return;
        }

        let goodsEval = this.goodsEval;
        let remark = goodsEval.remark;
        if (remark.trim() === '') {
          this.$api.showToast({
            title: '请输入评价说明',
            icon: 'none'
          });
          return;
        }

        SystemUtil.showLoading('提交中...');
        GoodsOrderApi.submitGoodEvaluat(goodsEval).then(() => {
          if (this.isMiniprogram) {
            let pages = getCurrentPages();
            let payWin = pages[pages.length - 2].window;
            payWin.toEvalSuccess();
            wx.navigateBack();
          }
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }
        wx.navigateBack();
      }
    },

    components: {
      PageHeader,
      SysImage,
      SysTextarea,
      ImgsUpload,
      SysStarInput
    }
  };

</script>

<style lang="scss">
  .goods-evaluat {
    height: 100%;

    .page-header {
      margin-bottom: formatPx(20);

      .goods-evaluat-submit {
        position: absolute;
        right: formatPx(30);
        bottom: 0;
        font-size: formatPx(26);
        color: #59c264;
      }
    }

    .goods-evaluat-line {
      height: 1px;
      background: #DADADA;
    }

    .goods-evaluat-score {
      height: formatPx(44);
      font-size: formatPx(30);

      >div {
        float: left;
        height: 100%;
      }

      .goods-evaluat-score-label {
        line-height: formatPx(44);
        margin-right: formatPx(10);
      }

      .goods-evaluat-score-star {
        width: formatPx(380);
      }

      .goods-evaluat-score-text {
        line-height: formatPx(44);
        color: #99999f;
      }
    }

    .goods-evaluat-statscore {
      margin-bottom: formatPx(30);
      padding: 0 formatPx(30);
    }

    .goods-evaluat-content {
      padding-top: formatPx(30);
      height: calc(100% - #{formatPx(130)});
      overflow: auto;

      .goods-evaluat-content-line {
        height: formatPx(18);
        background: #DADADA;
      }

      .goods-evaluat-info {
        padding: 0 formatPx(30);
        height: formatPx(100);
        margin-bottom: formatPx(10);

        >div {
          float: left;
          height: 100%;
        }

        .goods-evaluat-pic {
          width: formatPx(100);
        }

        .goods-evaluat-data {
          margin-left: formatPx(20);
          width: calc(100% - #{formatPx(120)});
          font-size: formatPx(30);
          color: #333333;
        }
      }

      .goods-evaluat-remark {
        margin-top: formatPx(30);
        padding: 0 formatPx(30);
        margin-bottom: formatPx(30);

        .goods-evaluat-remark-input {
          height: formatPx(250);
          font-size: formatPx(30);
        }

        .goods-evaluat-remark-pic {
          margin-top: formatPx(20);
        }
      }

      .goods-evaluat-content-star {
        margin-top: formatPx(30);
        padding: 0 formatPx(30);

        >div {
          margin-bottom: formatPx(20);

          &:last-child {
            margin-bottom: 0;
          }
        }

        .goods-evaluat-content-star-title {
          font-size: formatPx(30);
          margin-bottom: formatPx(40);
        }
      }
    }
  }

</style>
